<template>
  <!-- 企业经营范围详情 -->
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="addSysformData" :model="formData" label-width="80px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级名称" prop="parentId">
            <el-input v-model="formData.parentName" size="medium" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="businessName">
            <label slot="label" v-html="`名&emsp;&emsp;称`" />
            <el-input v-model="formData.businessName" readonly size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="" prop="orderNum">
            <label slot="label" v-html="`排&emsp;&emsp;序`" />
            <el-input-number v-model="formData.orderNum" disabled size="medium" style="width: 100%" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :lg="24">
          <el-form-item label="" prop="">
            <template slot="label">
              <span class="labelTitle" v-html="`备&emsp;&emsp;注`" />
            </template>
            <el-input v-model="formData.remark" readonly clearable type="textarea" :rows="3" :maxlength="500" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { detailBusinessScope } from '@/api/superviseBaseInfo/natureOfBusiness/index'
export default {
  name: 'DetailDialog',
  components: {},
  data() {
    return {
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        parentId: null, // 父级id
        businessName: '', // 名称
        orderNum: '', // 排序
        remark: '' // 备注
      }
    }
  },
  methods: {
    // 初始化弹框
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.getDetailById(id)
    },
    // 详情获取
    async getDetailById(id) {
      const { data } = await detailBusinessScope(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    // 确定
    submitForm() {
      this.dialogVisible = false
    }
  }
}
</script>

